<template>
  <router-view></router-view>
  <div style="height: 100%;display: flex;flex-direction: column" v-if="$route.name==='permission_role'">

    <el-row>
        <el-card style="width: 100%;">
          角色管理
          <span style="float: right">
                  <el-button @click="()=>{refresh()}" type="primary">刷新</el-button>

        </span>
        </el-card>
    </el-row>
    <el-table
        :data="state.data"
        border
        ref="tableRef"
        v-loading="state.loading"
        element-loading-text="正在加载..."
        :header-cell-style="{'text-align':'center','font-weight':'bold'}"
        :cell-style="{'text-align':'center'}"
        row-key="id"
        :tree-props="{ children: 'children'}"
        style="flex: 1;">
      <template v-for="item in columns">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable">
          <template #default="scope" v-if="item.render">
            <render-column :render="item.render" :scope="scope" :item="item"></render-column>
          </template>
        </el-table-column>
      </template>
    </el-table>


    <guigu-loading v-if="state.loading" text="正在加载请稍后..."></guigu-loading>
  </div>
</template>

<script setup lang="jsx">
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import GuiguLoading from "@/components/GuiguLoading/index.vue";
import RenderColumn from "@/components/RenderColumn/index.vue";
import {listRole} from "@/api/backend/permission/role.js";

const state=reactive({
  data:[],
  loading:false
})
const route=useRoute()
const router=useRouter()
const formRef=ref()
const columns = [
  {
    prop: "roleId",
    label: "角色id",
    minWidth:'160px'
  },

  {
    prop: "roleCode",
    label: "角色编码",
    minWidth:'160px',
  },
  {
    prop: "roleName",
    label: "角色名称",
    minWidth:'160px',
  },
  {
    prop: "desc",
    label: "描述",
    minWidth:'160px'
  },
  {
    prop: "roleId",
    label: "操作",
    minWidth:'160px',
    render(h, row, column, item) {
      return <>
        <ElButton onClick={()=>{toRolePermission(row[item.prop])}} type="danger">权限</ElButton>
        <ElButton onClick={()=>{toRoleRoute(row[item.prop])}} type="danger">路由</ElButton>
      </>
  }}
  ]

const $router=useRouter()

const toRolePermission=(id)=>{
  $router.push('/permission/role/permission/'+id)
}

const toRoleRoute=(id)=>{
    $router.push("/permission/role/route/"+id)
}
const refresh=()=>{
  state.loading=true
  listRole().then(res=>{
    state.data=res.data
  }).finally(()=>{
    state.loading=false
  })
}
onMounted(()=>{
  refresh()
})
</script>

<style scoped>

</style>